<template>
  <el-dialog :modelValue="visiable" title="修改" width="500" @close="$emit('close')">
    <div class="dialog-team">
      <el-form label-width="80px" :inline="false">
        <el-form-item label="分包商">
          <el-select v-model="team.compId" placeholder="请选择分包商" clearable>
            <el-option
              v-for="item in comps"
              :key="item.id"
              :label="item.shortName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="班组编号">
          <el-input v-model="team.name" placeholder="请输入编号" clearable />
        </el-form-item>

        <el-form-item label="负责人">
          <el-input v-model="team.fzr" placeholder="请输入负责人姓名" clearable />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="updateTeam">修改</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import useComp from '@renderer/composables/useComp'
import useTeam from '@renderer/composables/useTeam'
import { ElMessage } from 'element-plus'

const props = defineProps(['visiable', 'team'])
const emit = defineEmits(['close'])

const { all, comps } = useComp()
const { update } = useTeam()

const updateTeam = async () => {
  await update({
    id: props.team.id,
    name: props.team.name,
    compId: props.team.compId,
    fzr: props.team.fzr
  })
  ElMessage({
    type: 'success',
    message: '修改成功'
  })
  emit('close')
}

const cancel = () => {
  emit('close')
}

all()
</script>

<style lang="scss" scoped>
.dialog-team {
  @apply mt-5;
}
</style>
